import React, { useState, CSSProperties } from 'react';
import {BarsOutlined} from '@ant-design/icons';
import classnames from 'classnames';
import { Transition } from 'react-transition-group';
//ts默认不支持png格式,需要添加images.d.ts声明文件以支持加载png
import logo from '@/assets/images/logo.png';
import './index.less';
const duration = 1000;
//默认样式
const defaultStyle = {
    transition: `opacity ${duration}ms ease-in-out`,
    opacity: 0,
}
interface TransitionStyles {
    entering: CSSProperties;//进入时的样式
    entered: CSSProperties;//进入成功时的样式
    exiting: CSSProperties;//退出时的样式
    exited: CSSProperties;//退出成功时的样式
}
const transitionStyles: TransitionStyles = {
    entering: { opacity: 1 },//不透明度为1
    entered: { opacity: 1 }, //不透明度为1
    exiting: { opacity: 0 }, //不透明度为0
    exited: { opacity: 0 },  //不透明度为0
};

interface Props {
    currentCategory: string;//当前选中的分类 此数据会放在redux仓库中
    setCurrentCategory: (currentCategory: string) => any;// 改变仓库中的分类
    refreshLessons:Function
}
function HomeHeader(props: Props) {
    let [isMenuVisible, setIsMenuVisible]=useState(false);
    let setshow=()=>{
        console.log(isMenuVisible);
        setIsMenuVisible(!isMenuVisible)
    }
    const setCurrentCategory = (event: React.MouseEvent<HTMLUListElement>) => {
        let target: HTMLUListElement = event.target as HTMLUListElement;
        let category:any = target.dataset.category;//获取用户选择的分类名称
        props.setCurrentCategory(category);//设置分类名称
        props.refreshLessons();
        setIsMenuVisible(false);//关闭分类选择层
    }
    const liarr=[
        {
            type:'all',
            text:'全部课程'
        },
        {
            type:'react',
            text:'React课程'
        },
        {
            type:'vue',
            text:'Vue课程'
        }
    ]
    return (
        <header className="header-box">
            <div className="header-title">
                <img src={logo} />
                <BarsOutlined onClick={() => setIsMenuVisible(!isMenuVisible) } />
            </div>
           <Transition in={isMenuVisible} timeout={duration}>
               
               {
                   (state: keyof TransitionStyles)=>(
                    <ul
                        style={{
                            ...defaultStyle,
                            ...transitionStyles[state]
                        }}
                        onClick={setCurrentCategory}
                        className="nav-list"
                     >
                         {
                             liarr.map((item,index)=> <li key={index} data-category={item.type} className={classnames({ active: props.currentCategory === item.type })}>{item.text}</li>)
                         }
                       
                    </ul>
                   )
               }
          
            </Transition>
        </header>
    );
}
export default HomeHeader;